<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风行旅途火车订票系统</title>
    
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/login-modal.css">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f8fbff 0%, #e3f2fd 100%);
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
            color: white;
            padding: 0;
            box-shadow: 0 2px 10px rgba(33, 150, 243, 0.3);
            position: relative;
        }
        
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .login-btn, .user-menu {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .login-btn:hover, .user-menu:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        /* 导航栏样式 */
        .navigation {
            background: white;
            border-bottom: 1px solid #e0e0e0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .nav-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .nav-item {
            margin: 0;
        }
        
        .nav-link {
            display: block;
            padding: 15px 20px;
            color: #333;
            text-decoration: none;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #2196F3;
            border-bottom-color: #2196F3;
        }
        
        /* 主内容区域 */
        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 20px;
            min-height: calc(100vh - 200px);
        }
        
        /* 欢迎区域 */
        .welcome-section {
            background: white;
            border-radius: 15px;
            padding: 40px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        
        .welcome-section h1 {
            color: #2196F3;
            font-size: 2.5em;
            margin-bottom: 15px;
        }
        
        .welcome-section p {
            color: #666;
            font-size: 1.1em;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* 功能模块网格 */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .service-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .service-icon {
            font-size: 48px;
            margin-bottom: 20px;
            display: block;
        }
        
        .service-card.train .service-icon {
            color: #2196F3;
        }
        
        .service-card.hotel .service-icon {
            color: #10b981;
        }
        
        .service-card.meal .service-icon {
            color: #f59e0b;
        }
        
        .service-card.orders .service-icon {
            color: #ef4444;
        }
        
        .service-card h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.3em;
        }
        
        .service-card p {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .service-btn {
            background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            width: 100%;
        }
        
        .service-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        /* 内容区域 */
        .content-area {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            min-height: 400px;
        }
        
        .content-title {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5em;
            border-bottom: 2px solid #2196F3;
            padding-bottom: 10px;
        }
        
        /* Tab切换样式 */
        .order-tabs {
            display: flex;
            margin-bottom: 30px;
            border-bottom: 2px solid #e0e0e0;
            gap: 10px;
        }
        
        .tab-btn {
            background: transparent;
            border: none;
            padding: 12px 20px;
            cursor: pointer;
            font-size: 16px;
            color: #666;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            border-radius: 8px 8px 0 0;
        }
        
        .tab-btn:hover {
            color: #2196F3;
            background: rgba(33, 150, 243, 0.1);
        }
        
        .tab-btn.active {
            color: #2196F3;
            border-bottom-color: #2196F3;
            background: rgba(33, 150, 243, 0.1);
            font-weight: 600;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 数据表格样式 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .data-table th,
        .data-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .data-table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #333;
        }
        
        .data-table tr:hover {
            background: #f5f5f5;
        }
        
        /* 卡片网格样式 */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .item-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .item-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }

        .item-card.unavailable {
            opacity: 0.6;
            background: #f8f9fa;
        }

        .item-card.unavailable:hover {
            transform: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .text-danger {
            color: #dc3545 !important;
        }
        
        .card-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 14px;
        }
        
        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .card-content {
            padding: 20px;
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #333;
        }
        
        .card-info {
            margin-bottom: 15px;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .info-label {
            color: #666;
            font-weight: 500;
        }
        
        .info-value {
            color: #333;
            font-weight: 600;
        }
        
        .price-tag {
            color: #ef4444;
            font-size: 16px;
            font-weight: bold;
        }
        
        .card-actions {
            padding: 0 20px 20px;
        }
        
        .card-btn {
            width: 100%;
            padding: 10px;
            background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .card-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }
        
        .card-btn.hotel {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }
        
        .card-btn.meal {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }
        
        /* 选座模态框样式 */
        .seat-modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .seat-modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 20px;
            border-radius: 10px;
            width: 80%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .seat-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .seat-modal-close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .seat-modal-close:hover {
            color: black;
        }
        
        .carriage-selector {
            margin-bottom: 20px;
            text-align: center;
        }
        
        .carriage-btn {
            margin: 5px;
            padding: 8px 16px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
            border-radius: 5px;
        }
        
        .carriage-btn.active {
            background: #2196F3;
            color: white;
        }
        
        .seat-map {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            max-width: 400px;
            margin: 20px auto;
        }
        
        .seat {
            width: 40px;
            height: 40px;
            border: 2px solid #ddd;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
        }
        
        .seat.available {
            background: #f0f8ff;
            border-color: #2196F3;
        }
        
        .seat.selected {
            background: #2196F3;
            color: white;
        }
        
        .seat.occupied {
            background: #ccc;
            color: #666;
            cursor: not-allowed;
        }
        
        .seat-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
            font-size: 14px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .legend-seat {
            width: 20px;
            height: 20px;
            border-radius: 3px;
        }
        
        /* 按钮样式 */
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }
        
        .btn-primary {
            background: #2196F3;
            color: white;
        }
        
        .btn-success {
            background: #10b981;
            color: white;
        }
        
        .btn-warning {
            background: #f59e0b;
            color: white;
        }
        
        .btn-danger {
            background: #ef4444;
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        
        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 50px;
            color: #666;
        }
        
        .loading::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #2196F3;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 页脚样式 */
        .footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 30px 20px;
            margin-top: 50px;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .footer p {
            margin-bottom: 10px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 15px;
            }
            
            .nav-menu {
                flex-wrap: wrap;
            }
            
            .nav-link {
                padding: 10px 15px;
            }
            
            .services-grid {
                grid-template-columns: 1fr;
            }
            
            .welcome-section h1 {
                font-size: 2em;
            }
            
            .welcome-section, .content-area {
                padding: 20px;
            }
            
            .main-container {
                padding: 20px 10px;
            }
        }
        
        /* 隐藏类 */
        .hidden {
            display: none !important;
        }
        
        /* 通用模态框样式 */
        .modal {
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        /* 用户下拉菜单 */
        .user-dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: white;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1000;
            border-radius: 5px;
            border: 1px solid #e0e0e0;
        }
        
        .dropdown-content a {
            color: #333;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            transition: all 0.3s ease;
        }
        
        .dropdown-content a:hover {
            background-color: #f5f5f5;
        }
        
        .user-dropdown:hover .dropdown-content {
            display: block;
        }
        
        /* 搜索表单样式 */
        .search-section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .search-form {
            max-width: 100%;
        }
        
        .search-row {
            display: flex;
            align-items: end;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .form-group {
            flex: 1;
            min-width: 150px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: white;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #2196F3;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
        }
        
        .station-swap-btn {
            width: 40px;
            height: 40px;
            background: #f5f5f5;
            border: 2px solid #e0e0e0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 5px;
        }
        
        .station-swap-btn:hover {
            background: #2196F3;
            color: white;
            border-color: #2196F3;
        }
        
        .search-btn {
            padding: 12px 25px;
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
        }
        
        /* 座位等级选择样式 */
        .seat-class-selector {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            border: 2px solid #e0e0e0;
        }
        
        .seat-class-options {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .seat-class-option {
            flex: 1;
            min-width: 120px;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
        }
        
        .seat-class-option:hover {
            border-color: #2196F3;
            background: #f8fbff;
        }
        
        .seat-class-option.selected {
            border-color: #2196F3;
            background: #2196F3;
            color: white;
        }
        
        .seat-class-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .seat-class-price {
            font-size: 18px;
            color: #ef4444;
            font-weight: bold;
        }
        
        .seat-class-option.selected .seat-class-price {
            color: white;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .search-row {
                flex-direction: column;
                align-items: stretch;
            }
            
            .station-swap-btn {
                align-self: center;
                margin: 10px 0;
            }
            
            .form-group {
                min-width: auto;
            }
            
            .seat-class-options {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 头部区域 -->
    <header class="header">
        <div class="header-content">
            <a href="#" class="logo" onclick="showHome()">🚄 风行旅途火车订票系统</a>
            <div class="user-info">
                <!-- 未登录时显示 -->
                <div id="login-area" class="login-area">
                    <button class="login-btn" onclick="HeroLoginModal.showLogin()">登录</button>
                </div>
                <!-- 已登录时显示 -->
                <div id="user-area" class="user-area hidden">
                    <div class="user-dropdown">
                        <span class="user-menu" id="user-welcome">欢迎，用户</span>
                        <div class="dropdown-content">
                            <a href="profile.html">👤 个人中心</a>
                            <a href="#" id="admin-link" onclick="HeroCommon.openAdmin()" style="display: none;">⚙️ 进入后台</a>
                            <a href="#" onclick="HeroLoginModal.showLogoutConfirm()">🚪 退出登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 导航栏 -->
    <nav class="navigation">
        <div class="nav-content">
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link active" onclick="showHome()" data-section="home">首页</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="showTrains()" data-section="trains">火车票购买</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="showHotels()" data-section="hotels">酒店预订</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="showMeals()" data-section="meals">火车餐购买</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" onclick="showOrders()" data-section="orders">我的订单</a>
                </li>
            </ul>
        </div>
    </nav>
    
    <!-- 主内容区域 -->
    <main class="main-container">
        <!-- 首页内容 -->
        <div id="home-content" class="content-section">
            <div class="welcome-section">
                <h1>欢迎使用风行旅途火车订票系统</h1>
                <p>为您提供便捷的火车票预订、酒店住宿、火车餐订购等一站式服务</p>
            </div>
            
            <div class="services-grid">
                <div class="service-card train" onclick="showTrains()">
                    <span class="service-icon">🚄</span>
                    <h3>火车票购买</h3>
                    <p>查看火车班次信息，选择合适的车次进行购票</p>
                    <button class="service-btn">立即购票</button>
                </div>
                
                <div class="service-card hotel" onclick="showHotels()">
                    <span class="service-icon">🏨</span>
                    <h3>酒店预订</h3>
                    <p>预订舒适的酒店住宿，享受优质的住宿体验</p>
                    <button class="service-btn">预订酒店</button>
                </div>
                
                <div class="service-card meal" onclick="showMeals()">
                    <span class="service-icon">🍽️</span>
                    <h3>火车餐购买</h3>
                    <p>在线订购火车餐食，旅途中享受美食</p>
                    <button class="service-btn">订购餐食</button>
                </div>
                
                <div class="service-card orders" onclick="showOrders()">
                    <span class="service-icon">📋</span>
                    <h3>订单管理</h3>
                    <p>查看和管理您的所有订单记录</p>
                    <button class="service-btn">查看订单</button>
                </div>
            </div>
        </div>
        
        <!-- 火车票购买内容 -->
        <div id="trains-content" class="content-section hidden">
            <div class="content-area">
                <h2 class="content-title">🚄 火车票购买</h2>
                
                <!-- 搜索表单 -->
                <div class="search-section">
                    <div class="search-form">
                        <div class="search-row">
                            <div class="form-group">
                                <label for="departure-station">出发站</label>
                                <input type="text" id="departure-station" class="form-input" placeholder="请输入出发城市或车站" list="departure-station-list">
                            </div>
                            
                            <div class="station-swap-btn" onclick="swapStations()">
                                <span style="font-size: 18px;">⇄</span>
                            </div>
                            
                            <div class="form-group">
                                <label for="arrival-station">目的站</label>
                                <input type="text" id="arrival-station" class="form-input" placeholder="请输入目的城市或车站" list="arrival-station-list">
                            </div>
                            
                            <div class="form-group">
                                <label for="travel-date">出发日期</label>
                                <input type="date" id="travel-date" class="form-input">
                            </div>
                            
                            <div class="form-group">
                                <button class="btn btn-primary search-btn" onclick="searchTrains()">
                                    🔍 查询车次
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 出发站候选列表 -->
                <datalist id="departure-station-list">
                </datalist>
                
                <!-- 到达站候选列表 -->
                <datalist id="arrival-station-list">
                </datalist>
                
                <div id="trains-list" style="text-align: center; color: #666; padding: 50px;">正在加载火车信息...</div>
            </div>
        </div>
        
        <!-- 酒店预订内容 -->
        <div id="hotels-content" class="content-section hidden">
            <div class="content-area">
                <h2 class="content-title">🏨 酒店预订</h2>
                
                <!-- 酒店搜索表单 -->
                <div class="search-section">
                    <div class="search-form">
                        <div class="search-row">
                            <div class="form-group">
                                <label for="hotel-province">省份</label>
                                <input type="text" id="hotel-province" class="form-input" placeholder="请输入省份">
                            </div>
                            
                            <div class="form-group">
                                <label for="hotel-city">城市</label>
                                <input type="text" id="hotel-city" class="form-input" placeholder="请输入城市">
                            </div>
                            
                            <div class="form-group">
                                <label for="hotel-checkin-date">入住日期</label>
                                <input type="date" id="hotel-checkin-date" class="form-input">
                            </div>
                            
                            <div class="form-group">
                                <label for="hotel-checkout-date">退房日期</label>
                                <input type="date" id="hotel-checkout-date" class="form-input">
                            </div>
                            
                            <div class="form-group">
                                <button class="btn btn-success search-btn" onclick="searchHotels()">
                                    🔍 搜索酒店
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="hotels-list" style="text-align: center; color: #666; padding: 50px;">正在加载酒店信息...</div>
            </div>
        </div>
        
        <!-- 火车餐购买内容 -->
        <div id="meals-content" class="content-section hidden">
            <div class="content-area">
                <h2 class="content-title">🍽️ 火车餐购买</h2>
                <div style="text-align: center; margin-bottom: 20px;">
                    <button class="btn btn-warning" onclick="loadMeals()" style="padding: 15px 30px; font-size: 16px;">
                        🍽️ 浏览可用餐食
                    </button>
                </div>
                <div id="meals-list" style="text-align: center; color: #666; padding: 50px;">点击上方按钮浏览可用餐食选项</div>
            </div>
        </div>
        
        <!-- 订单管理内容 -->
        <div id="orders-content" class="content-section hidden">
            <div class="content-area">
                <h2 class="content-title">📋 我的订单</h2>
                
                <!-- 订单类型Tab切换 -->
                <div class="order-tabs">
                    <button class="tab-btn active" data-tab="train-orders" onclick="switchOrderTab('train-orders', this)">
                        🚄 火车票订单
                    </button>
                    <button class="tab-btn" data-tab="meal-orders" onclick="switchOrderTab('meal-orders', this)">
                        🍱 餐食订单
                    </button>
                    <button class="tab-btn" data-tab="hotel-orders" onclick="switchOrderTab('hotel-orders', this)">
                        🏨 酒店订单
                    </button>
                </div>
                
                <!-- 火车票订单内容 -->
                <div id="train-orders" class="tab-content active">
                    <div id="train-orders-list">
                        <p style="text-align: center; color: #666; padding: 50px;">请先登录查看火车票订单</p>
                    </div>
                </div>
                
                <!-- 餐食订单内容 -->
                <div id="meal-orders" class="tab-content">
                    <div id="meal-orders-list">
                        <p style="text-align: center; color: #666; padding: 50px;">请先登录查看餐食订单</p>
                    </div>
                </div>
                
                <!-- 酒店订单内容 -->
                <div id="hotel-orders" class="tab-content">
                    <div id="hotel-orders-list">
                        <p style="text-align: center; color: #666; padding: 50px;">请先登录查看酒店订单</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 选座模态框 -->
    <div id="seat-modal" class="seat-modal">
        <div class="seat-modal-content">
            <div class="seat-modal-header">
                <h2>选择座位</h2>
                <span class="seat-modal-close" onclick="closeSeatModal()">&times;</span>
            </div>
            
            <div id="train-info" class="train-info" style="text-align: center; margin-bottom: 20px; font-weight: bold; color: #333;"></div>
            
            <!-- 座位等级选择 -->
            <div class="seat-class-selector">
                <h3 style="text-align: center; margin-bottom: 15px;">选择座位等级</h3>
                <div class="seat-class-options" id="seat-class-options">
                    <div class="seat-class-option selected" data-class="second" data-price="108">
                        <div class="seat-class-name">二等座</div>
                        <div class="seat-class-price">¥108</div>
                    </div>
                    <div class="seat-class-option" data-class="first" data-price="173">
                        <div class="seat-class-name">一等座</div>
                        <div class="seat-class-price">¥173</div>
                    </div>
                    <div class="seat-class-option" data-class="business" data-price="518">
                        <div class="seat-class-name">商务座</div>
                        <div class="seat-class-price">¥518</div>
                    </div>
                </div>
            </div>
            
            <div class="carriage-selector">
                <h3>选择车厢</h3>
                <div id="carriage-buttons"></div>
            </div>
            
            <div class="seat-legend">
                <div class="legend-item">
                    <div class="legend-seat available" style="background: #f0f8ff; border: 2px solid #2196F3;"></div>
                    <span>可选</span>
                </div>
                <div class="legend-item">
                    <div class="legend-seat selected" style="background: #2196F3;"></div>
                    <span>已选</span>
                </div>
                <div class="legend-item">
                    <div class="legend-seat occupied" style="background: #ccc;"></div>
                    <span>已售</span>
                </div>
            </div>
            
            <div id="seat-map" class="seat-map"></div>
            
            <div id="selected-seat-info" style="text-align: center; margin: 20px 0; font-weight: bold; color: #2196F3;"></div>
            
            <div style="text-align: center; margin-top: 20px;">
                <button class="btn btn-secondary" onclick="closeSeatModal()">取消</button>
                <button id="confirm-seat-btn" class="btn btn-primary" onclick="confirmSeatSelection()" disabled>确认选座</button>
            </div>
        </div>
    </div>

    <!-- 购票确认弹窗 -->
    <div id="booking-confirm-modal" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 600px;">
            <h3 style="text-align: center; color: #2196F3; margin-bottom: 30px;">🚄 购票确认</h3>
            
            <div class="booking-details">
                <div class="detail-section">
                    <h4>火车信息</h4>
                    <div id="train-info-display"></div>
                </div>
                
                <div class="detail-section">
                    <h4>座位信息</h4>
                    <div id="seat-info-display"></div>
                </div>
                
                <div class="detail-section">
                    <h4>乘客信息</h4>
                    <div class="form-row">
                        <label for="passenger-name">乘客姓名:</label>
                        <input type="text" id="passenger-name" class="form-input" placeholder="请输入乘客姓名" required>
                    </div>
                    <div class="form-row">
                        <label for="passenger-phone">联系电话:</label>
                        <input type="tel" id="passenger-phone" class="form-input" placeholder="请输入联系电话" required>
                    </div>
                </div>
                
                <div class="detail-section">
                    <h4>订单信息</h4>
                    <div id="order-summary-display"></div>
                </div>
            </div>
            
            <div style="text-align: center; margin-top: 30px;">
                <button class="btn btn-secondary" onclick="closeBookingConfirmModal()">取消</button>
                <button class="btn btn-primary" onclick="submitTrainOrder()">确认购买</button>
            </div>
        </div>
    </div>

    <style>
        .booking-details {
            max-height: 60vh;
            overflow-y: auto;
        }
        
        .detail-section {
            margin-bottom: 25px;
            padding: 20px;
            background: #f8fafc;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }
        
        .detail-section h4 {
            margin: 0 0 15px 0;
            color: #334155;
            font-size: 16px;
            border-bottom: 2px solid #2196F3;
            padding-bottom: 5px;
        }
        
        .form-row {
            margin-bottom: 15px;
        }
        
        .form-row label {
            display: block;
            margin-bottom: 5px;
            color: #374151;
            font-weight: 500;
        }
        
        .form-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #2196F3;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .info-item:last-child {
            border-bottom: none;
        }
        
        .info-label {
            font-weight: 500;
            color: #374151;
        }
        
        .info-value {
            color: #2196F3;
            font-weight: 600;
        }
        
        .price-highlight {
            font-size: 18px;
            color: #dc2626;
            font-weight: bold;
        }
    </style>

    <!-- 酒店预订确认弹窗 -->
    <div id="hotel-booking-confirm-modal" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 600px;">
            <h3 style="text-align: center; color: #10b981; margin-bottom: 30px;">🏨 酒店预订确认</h3>
            
            <div class="booking-details">
                <div class="detail-section">
                    <h4>酒店信息</h4>
                    <div id="hotel-info-display"></div>
                </div>
                
                <div class="detail-section">
                    <h4>入住信息</h4>
                    <div class="form-row">
                        <label for="check-in-date">入住日期:</label>
                        <input type="date" id="check-in-date" class="form-input" required>
                    </div>
                    <div class="form-row">
                        <label for="check-out-date">退房日期:</label>
                        <input type="date" id="check-out-date" class="form-input" required>
                    </div>
                    <div class="form-row">
                        <label for="nights-count">入住天数:</label>
                        <span id="nights-count" class="form-input" style="border: none; background: #f8fafc; padding: 10px 15px;">1 晚</span>
                    </div>
                </div>
                
                <div class="detail-section">
                    <h4>入住人信息</h4>
                    <div class="form-row">
                        <label for="guest-name">入住人姓名:</label>
                        <input type="text" id="guest-name" class="form-input" placeholder="请输入入住人姓名" required>
                    </div>
                    <div class="form-row">
                        <label for="guest-phone">联系电话:</label>
                        <input type="tel" id="guest-phone" class="form-input" placeholder="请输入联系电话" required>
                    </div>
                </div>
                
                <div class="detail-section">
                    <h4>订单信息</h4>
                    <div id="hotel-order-summary-display"></div>
                </div>
            </div>
            
            <div style="text-align: center; margin-top: 30px;">
                <button class="btn btn-secondary" onclick="closeHotelBookingConfirmModal()">取消</button>
                <button class="btn btn-success" onclick="submitHotelOrder()">确认预订</button>
            </div>
        </div>
    </div>

    <!-- 餐食订购确认弹窗 -->
    <div id="meal-booking-confirm-modal" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 600px;">
            <h3 style="text-align: center; color: #f59e0b; margin-bottom: 30px;">🍽️ 餐食订购确认</h3>
            
            <div class="booking-details">
                <div class="detail-section">
                    <h4>餐食信息</h4>
                    <div id="meal-info-display"></div>
                </div>
                
                <div class="detail-section">
                    <h4>订购信息</h4>
                    <div class="form-row">
                        <label for="meal-quantity">购买数量:</label>
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <button type="button" class="btn btn-secondary" onclick="changeMealQuantity(-1)" style="width: 40px; height: 40px; padding: 0;">-</button>
                            <input type="number" id="meal-quantity" class="form-input" value="1" min="1" max="10" style="width: 80px; text-align: center;" readonly>
                            <button type="button" class="btn btn-secondary" onclick="changeMealQuantity(1)" style="width: 40px; height: 40px; padding: 0;">+</button>
                        </div>
                    </div>
                    <div class="form-row">
                        <label for="selected-train-ticket">选择车票:</label>
                        <select id="selected-train-ticket" class="form-input" required>
                            <option value="">请选择您已购买的车票</option>
                        </select>
                    </div>
                </div>
                
                <div class="detail-section">
                    <h4>订单信息</h4>
                    <div id="meal-order-summary-display"></div>
                </div>
            </div>
            
            <div style="text-align: center; margin-top: 30px;">
                <button class="btn btn-secondary" onclick="closeMealBookingConfirmModal()">取消</button>
                <button class="btn btn-warning" onclick="submitMealOrder()">确认订购</button>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <p> 风行旅途火车订票系统. 保留所有权利.</p>
            <p>为您提供安全、便捷的出行服务</p>
        </div>
    </footer>
    
    <!-- 引入脚本文件 -->
    <script src="js/auth.js"></script>
    <script src="js/request.js"></script>
    <script src="js/login-modal.js"></script>
    <script src="js/common.js"></script>
    <script src="js/boot-train.js"></script>
    <script src="js/boot-hotel.js"></script>
    <script src="js/boot-meal.js"></script>
    <script src="js/boot-trainorder.js"></script>
    <script src="js/boot-hotelorder.js"></script>
    <script src="js/boot-mealorder.js"></script>
    
    <script>
        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateLoginStatus();
            showHome();
            loadStations(); // 加载站点信息
            
            // 设置登录成功回调
            HeroLoginModal.setLoginSuccessCallback((data) => {
                updateLoginStatus();
                HeroCommon.showNotification('登录成功！', 'success');
            });
            
            // 设置注销成功回调
            HeroLoginModal.setLogoutSuccessCallback(() => {
                updateLoginStatus();
                showHome(); // 返回首页
                HeroCommon.showNotification('已退出登录', 'info');
            });
            
            // 酒店预订日期变化监听器
            const checkInInput = document.getElementById('check-in-date');
            const checkOutInput = document.getElementById('check-out-date');
            
            if (checkInInput && checkOutInput) {
                checkInInput.addEventListener('change', function() {
                    // 当入住日期改变时，更新退房日期的最小值
                    const checkInDate = new Date(this.value);
                    const nextDay = new Date(checkInDate);
                    nextDay.setDate(checkInDate.getDate() + 1);
                    checkOutInput.min = nextDay.toISOString().split('T')[0];
                    
                    // 如果退房日期早于或等于入住日期，自动设置为入住日期的下一天
                    if (checkOutInput.value && new Date(checkOutInput.value) <= checkInDate) {
                        checkOutInput.value = nextDay.toISOString().split('T')[0];
                    }
                    
                    updateNightsCount();
                });
                
                checkOutInput.addEventListener('change', function() {
                    updateNightsCount();
                });
            }
            
            // 酒店搜索表单日期变化监听器
            const hotelCheckInInput = document.getElementById('hotel-checkin-date');
            const hotelCheckOutInput = document.getElementById('hotel-checkout-date');
            
            if (hotelCheckInInput && hotelCheckOutInput) {
                // 设置今天为最小日期
                const today = new Date();
                const todayStr = today.toISOString().split('T')[0];
                hotelCheckInInput.min = todayStr;
                
                hotelCheckInInput.addEventListener('change', function() {
                    const checkInDate = new Date(this.value);
                    const nextDay = new Date(checkInDate);
                    nextDay.setDate(checkInDate.getDate() + 1);
                    hotelCheckOutInput.min = nextDay.toISOString().split('T')[0];
                    
                    // 如果退房日期早于或等于入住日期，自动设置为入住日期的下一天
                    if (hotelCheckOutInput.value && new Date(hotelCheckOutInput.value) <= checkInDate) {
                        hotelCheckOutInput.value = nextDay.toISOString().split('T')[0];
                    }
                });
            }
            
            // 座位等级选择事件监听
            document.addEventListener('click', function(e) {
                if (e.target.closest('.seat-class-option')) {
                    const option = e.target.closest('.seat-class-option');
                    const classType = option.dataset.class;
                    const className = option.querySelector('.seat-class-name').textContent;
                    const price = parseInt(option.dataset.price);
                    selectSeatClass(classType, className, price);
                }
            });
        });
        
        // 订单状态转换
        function getOrderStatusText(status) {
            const statusMap = {
                '0': '待确认',
                '1': '待支付',
                '2': '已支付', 
                '3': '已取消'
            };
            return statusMap[status] || '未知状态';
        }

        // 座位号标准化函数 - 统一转换为 "车厢号车座位号" 格式
        function normalizeSeatNumber(seatNumber) {
            if (!seatNumber) return [];
            
            // 如果已经是标准格式 (如: "1车01A", "08车20A")
            if (seatNumber.includes('车')) {
                return [seatNumber];
            }
            
            // 如果是简化格式 (如: "02B", "03D")，无法确定车厢号，返回多个可能的匹配
            // 为了简化处理，我们为1-8车厢都添加这个座位
            const results = [];
            for (let carriage = 1; carriage <= 8; carriage++) {
                results.push(`${carriage}车${seatNumber}`);
            }
            return results;
        }

        // 更新登录状态显示
        function updateLoginStatus() {
            const isLoggedIn = HeroAuth.isLoggedIn();
            const loginArea = document.getElementById('login-area');
            const userArea = document.getElementById('user-area');
            
            if (isLoggedIn) {
                loginArea.classList.add('hidden');
                userArea.classList.remove('hidden');
                
                // 获取用户信息
                HeroAuth.getInfo()
                    .then(data => {
                        if (data && data.user) {
                            document.getElementById('user-welcome').textContent = `欢迎，${data.user.nickName || '用户'}`;
                            
                            // 检查用户角色，只有管理员才显示后台入口
                            const adminLink = document.getElementById('admin-link');
                            if (data.roles && data.roles.includes('admin')) {
                                adminLink.style.display = 'block';
                            } else {
                                adminLink.style.display = 'none';
                            }
                        }
                    })
                    .catch(error => {
                        console.error('获取用户信息失败:', error);
                    });
            } else {
                loginArea.classList.remove('hidden');
                userArea.classList.add('hidden');
            }
        }
        
        // 显示指定内容区域
        function showContent(sectionName) {
            // 隐藏所有内容区域
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.add('hidden');
            });
            
            // 显示指定区域
            const targetSection = document.getElementById(sectionName + '-content');
            if (targetSection) {
                targetSection.classList.remove('hidden');
            }
            
            // 更新导航状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            const targetNav = document.querySelector(`[data-section="${sectionName}"]`);
            if (targetNav) {
                targetNav.classList.add('active');
            }
        }
        
        // 显示首页
        function showHome() {
            showContent('home');
        }
        
        // 显示火车票列表
        function showTrains() {
            showContent('trains');
            // 设置默认日期为今天
            const today = new Date();
            document.getElementById('travel-date').value = today.toISOString().split('T')[0];
            document.getElementById('travel-date').min = today.toISOString().split('T')[0];
            // 默认加载所有火车信息
            loadTrains();
        }
        
        // 显示酒店列表
        function showHotels() {
            showContent('hotels');
            // 默认加载所有酒店信息
            loadHotels();
        }
        
        // 显示餐食列表
        function showMeals() {
            showContent('meals');
            // 不自动加载餐食，用户需要点击按钮加载
        }
        
        // 显示订单列表
        function showOrders() {
            showContent('orders');
            if (HeroAuth.isLoggedIn()) {
                // 加载默认的火车票订单tab
                loadTrainOrders();
            } else {
                // 为所有tab显示未登录提示
                ['train-orders-list', 'meal-orders-list', 'hotel-orders-list'].forEach(id => {
                    const container = document.getElementById(id);
                    if (container) {
                        container.innerHTML = '<p style="text-align: center; color: #666; padding: 50px;">请先登录查看订单信息<br><button class="btn btn-primary" onclick="HeroLoginModal.showLogin()">立即登录</button></p>';
                    }
                });
            }
        }
        
        // Tab切换函数
        function switchOrderTab(tabId, buttonElement) {
            // 移除所有active类
            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
            
            // 激活当前选中的tab
            buttonElement.classList.add('active');
            document.getElementById(tabId).classList.add('active');
            
            // 根据tab类型加载对应的订单数据
            if (HeroAuth.isLoggedIn()) {
                switch(tabId) {
                    case 'train-orders':
                        loadTrainOrders();
                        break;
                    case 'meal-orders':
                        loadMealOrders();
                        break;
                    case 'hotel-orders':
                        loadHotelOrders();
                        break;
                }
            }
        }
        
        // 计算行程时间
        function calculateDuration(departureTime, arrivalTime) {
            if (!departureTime || !arrivalTime) {
                return '约4小时';
            }
            
            const departure = new Date(departureTime);
            const arrival = new Date(arrivalTime);
            const diffMs = arrival - departure;
            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
            const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
            
            if (diffHours > 0) {
                return diffMinutes > 0 ? `${diffHours}小时${diffMinutes}分` : `${diffHours}小时`;
            } else {
                return `${diffMinutes}分钟`;
            }
        }
        
        // 交换出发站和目的站
        function swapStations() {
            const departureStation = document.getElementById('departure-station');
            const arrivalStation = document.getElementById('arrival-station');
            
            const temp = departureStation.value;
            departureStation.value = arrivalStation.value;
            arrivalStation.value = temp;
        }
        
        // 搜索火车票
        function searchTrains() {
            const departureStation = document.getElementById('departure-station').value.trim();
            const arrivalStation = document.getElementById('arrival-station').value.trim();
            const travelDate = document.getElementById('travel-date').value;
            
            if (!departureStation) {
                HeroCommon.showNotification('请输入出发站', 'warning');
                document.getElementById('departure-station').focus();
                return;
            }
            
            if (!arrivalStation) {
                HeroCommon.showNotification('请输入目的站', 'warning');
                document.getElementById('arrival-station').focus();
                return;
            }
            
            if (!travelDate) {
                HeroCommon.showNotification('请选择出发日期', 'warning');
                document.getElementById('travel-date').focus();
                return;
            }
            
            if (departureStation === arrivalStation) {
                HeroCommon.showNotification('出发站和目的站不能相同', 'warning');
                return;
            }
            
            // 搜索火车票
            loadTrains(departureStation, arrivalStation, travelDate);
        }
        
        // 当前选择的座位等级信息
        let currentSeatClass = {
            type: 'second',
            name: '二等座',
            price: 108
        };
        
        // 选择座位等级
        function selectSeatClass(classType, className, price) {
            // 更新选择状态
            document.querySelectorAll('.seat-class-option').forEach(option => {
                option.classList.remove('selected');
            });
            
            const selectedOption = document.querySelector(`[data-class="${classType}"]`);
            if (selectedOption) {
                selectedOption.classList.add('selected');
            }
            
            // 更新当前座位等级信息
            currentSeatClass = {
                type: classType,
                name: className,
                price: price
            };
            
            // 重新生成座位地图以应用新的座位类型
            const activeCarriageBtn = document.querySelector('.carriage-btn.active');
            if (activeCarriageBtn) {
                const carriageNum = parseInt(activeCarriageBtn.textContent);
                generateSeatMap(carriageNum);
            }
        }
        
        // 加载站点信息
        function loadStations() {
            // 获取所有火车信息来提取站点
            TrainAPI.listTrain({ pageNum: 1, pageSize: 1000 })
                .then(data => {
                    if (data && data.rows) {
                        const departureStations = new Set();
                        const arrivalStations = new Set();
                        
                        // 收集所有出发站和到达站
                        data.rows.forEach(train => {
                            if (train.departureStation) {
                                departureStations.add(train.departureStation);
                            }
                            if (train.arrivalStation) {
                                arrivalStations.add(train.arrivalStation);
                            }
                        });
                        
                        // 更新出发站下拉列表
                        const departureList = document.getElementById('departure-station-list');
                        departureList.innerHTML = '';
                        Array.from(departureStations).sort().forEach(station => {
                            const option = document.createElement('option');
                            option.value = station;
                            departureList.appendChild(option);
                        });
                        
                        // 更新到达站下拉列表
                        const arrivalList = document.getElementById('arrival-station-list');
                        arrivalList.innerHTML = '';
                        Array.from(arrivalStations).sort().forEach(station => {
                            const option = document.createElement('option');
                            option.value = station;
                            arrivalList.appendChild(option);
                        });
                    }
                })
                .catch(error => {
                    console.error('加载站点信息失败:', error);
                });
        }
        
        // 加载火车信息
        function loadTrains(departureStation = null, arrivalStation = null, travelDate = null) {
            const container = document.getElementById('trains-list');
            container.innerHTML = '<div class="loading">正在搜索符合条件的火车...</div>';
            
            // 构建查询参数
            const params = { pageNum: 1, pageSize: 20 };
            if (departureStation) params.departureStation = departureStation;
            if (arrivalStation) params.arrivalStation = arrivalStation;
            if (travelDate) params.travelDate = travelDate;
            
            TrainAPI.listTrain(params)
                .then(data => {
                    if (data && data.rows && data.rows.length > 0) {
                        let html = '<div class="cards-grid">';
                        
                        data.rows.forEach(train => {
                            const departureTime = train.departureTime ? new Date(train.departureTime).toLocaleString() : 'N/A';
                            const arrivalTime = train.arrivalTime ? new Date(train.arrivalTime).toLocaleString() : 'N/A';
                            
                            html += `
                                <div class="item-card">
                                    <div class="card-image">
                                        ${train.trainImage ? 
                                            `<img src="${train.trainImage}" alt="${train.trainName || train.trainNumber}" onerror="this.parentElement.innerHTML='无图片'">` :
                                            '无图片'
                                        }
                                    </div>
                                    <div class="card-content">
                                        <div class="card-title">${train.trainNumber || 'N/A'} - ${train.trainName || ''}</div>
                                        <div class="card-info">
                                            <div class="info-row">
                                                <span class="info-label">出发站:</span>
                                                <span class="info-value">${train.departureStation || 'N/A'}</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">到达站:</span>
                                                <span class="info-value">${train.arrivalStation || 'N/A'}</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">出发时间:</span>
                                                <span class="info-value">${departureTime}</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">到达时间:</span>
                                                <span class="info-value">${arrivalTime}</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">余票:</span>
                                                <span class="info-value">${train.availableSeats || 0}张</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">票价起:</span>
                                                <span class="info-value">
                                                    <span class="price-tag">¥108</span> 起
                                                </span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">历时:</span>
                                                <span class="info-value">${calculateDuration(train.departureTime, train.arrivalTime)}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-actions">
                                        <button class="card-btn" onclick="bookTrain(${train.trainId})">立即预订</button>
                                    </div>
                                </div>
                            `;
                        });
                        
                        html += '</div>';
                        container.innerHTML = html;
                    } else {
                        container.innerHTML = '<p style="text-align: center; color: #666; padding: 50px;">暂无火车信息</p>';
                    }
                })
                .catch(error => {
                    console.error('加载火车信息失败:', error);
                    container.innerHTML = '<p style="text-align: center; color: #ef4444; padding: 50px;">加载失败，请稍后重试</p>';
                });
        }
        
        // 省市数据映射 (根据数据库实际数据)
        const provinceCityMap = {
            '北京市': ['北京市'],
            '上海市': ['上海市'],
            '广东省': ['广州市'],
            '云南省': ['昆明市'],
            '陕西省': ['西安市']
        };

        // 更新城市选项
        function updateCityOptions() {
            const provinceSelect = document.getElementById('hotel-province');
            const citySelect = document.getElementById('hotel-city');
            const selectedProvince = provinceSelect.value;
            
            citySelect.innerHTML = '';
            
            if (selectedProvince && provinceCityMap[selectedProvince]) {
                citySelect.disabled = false;
                citySelect.innerHTML = '<option value="">请选择城市</option>';
                provinceCityMap[selectedProvince].forEach(city => {
                    citySelect.innerHTML += `<option value="${city}">${city}</option>`;
                });
            } else {
                citySelect.disabled = true;
                citySelect.innerHTML = '<option value="">请先选择省份</option>';
            }
        }

        // 搜索酒店
        function searchHotels() {
            const province = document.getElementById('hotel-province').value;
            const city = document.getElementById('hotel-city').value;
            const checkinDate = document.getElementById('hotel-checkin-date').value;
            const checkoutDate = document.getElementById('hotel-checkout-date').value;
            
            // 省份和城市至少需要选择一个
            if (!province && !city) {
                HeroCommon.showNotification('请至少选择省份或城市', 'warning');
                return;
            }
            
            // 如果选择了日期，需要验证日期的合理性
            if (checkinDate && checkoutDate) {
                if (new Date(checkinDate) >= new Date(checkoutDate)) {
                    HeroCommon.showNotification('退房日期必须晚于入住日期', 'warning');
                    return;
                }
            } else if (checkinDate || checkoutDate) {
                // 如果只选择了一个日期，给出提示
                HeroCommon.showNotification('请同时选择入住和退房日期，或都不选择', 'warning');
                return;
            }
            
            loadHotels(province, city, checkinDate, checkoutDate);
        }

        // 加载酒店信息
        function loadHotels(province = null, city = null, checkinDate = null, checkoutDate = null) {
            const container = document.getElementById('hotels-list');
            container.innerHTML = '<div class="loading">正在搜索符合条件的酒店...</div>';
            
            // 构建查询参数
            const params = { pageNum: 1, pageSize: 20 };
            if (province) params.province = province;
            if (city) params.city = city;
            if (checkinDate) params.checkinDate = checkinDate;
            if (checkoutDate) params.checkoutDate = checkoutDate;
            
            HotelAPI.listHotel(params)
                .then(data => {
                    if (data && data.rows && data.rows.length > 0) {
                        let html = '<div class="cards-grid">';
                        
                        data.rows.forEach(hotel => {
                            // 计算可用房间数量，考虑预订情况
                            const availableRooms = Math.max(0, (hotel.availableRooms || 0));
                            const isAvailable = availableRooms > 0;
                            
                            html += `
                                <div class="item-card ${!isAvailable ? 'unavailable' : ''}">
                                    <div class="card-image">
                                        ${hotel.hotelImage ? 
                                            `<img src="${hotel.hotelImage}" alt="${hotel.hotelName}" onerror="this.parentElement.innerHTML='无图片'">` :
                                            '无图片'
                                        }
                                    </div>
                                    <div class="card-content">
                                        <div class="card-title">${hotel.hotelName || 'N/A'}</div>
                                        <div class="card-info">
                                            <div class="info-row">
                                                <span class="info-label">地址:</span>
                                                <span class="info-value">${hotel.hotelAddress || 'N/A'}</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">电话:</span>
                                                <span class="info-value">${hotel.hotelPhone || 'N/A'}</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">房型:</span>
                                                <span class="info-value">${hotel.roomType || 'N/A'}</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">可用房间:</span>
                                                <span class="info-value ${availableRooms === 0 ? 'text-danger' : ''}" id="hotel-rooms-${hotel.hotelId}">${availableRooms}间</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">价格:</span>
                                                <span class="info-value price-tag">¥${hotel.price || 'N/A'}/晚</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-actions">
                                        <button class="card-btn hotel" id="book-btn-${hotel.hotelId}" onclick="bookHotel(${hotel.hotelId}, ${availableRooms})" 
                                                ${!isAvailable ? 'disabled' : ''}>
                                            ${isAvailable ? '立即预订' : '已满房'}
                                        </button>
                                    </div>
                                </div>
                            `;
                        });
                        
                        html += '</div>';
                        container.innerHTML = html;
                    } else {
                        container.innerHTML = '<p style="text-align: center; color: #666; padding: 50px;">暂无符合条件的酒店</p>';
                    }
                })
                .catch(error => {
                    console.error('加载酒店信息失败:', error);
                    container.innerHTML = '<p style="text-align: center; color: #ef4444; padding: 50px;">加载失败，请稍后重试</p>';
                });
        }
        
        // 加载餐食信息
        function loadMeals() {
            const container = document.getElementById('meals-list');
            container.innerHTML = '<div class="loading">正在加载餐食信息...</div>';
            
            MealAPI.listMeal({ pageNum: 1, pageSize: 20 })
                .then(data => {
                    if (data && data.rows && data.rows.length > 0) {
                        let html = '<div class="cards-grid">';
                        
                        data.rows.forEach(meal => {
                            html += `
                                <div class="item-card">
                                    <div class="card-image">
                                        ${meal.mealImage ? 
                                            `<img src="${meal.mealImage}" alt="${meal.mealName}" onerror="this.parentElement.innerHTML='无图片'">` :
                                            '无图片'
                                        }
                                    </div>
                                    <div class="card-content">
                                        <div class="card-title">${meal.mealName || 'N/A'}</div>
                                        <div class="card-info">
                                            <div class="info-row">
                                                <span class="info-label">餐食类型:</span>
                                                <span class="info-value">${meal.mealType || 'N/A'}</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">描述:</span>
                                                <span class="info-value">${meal.mealDescription || meal.description || 'N/A'}</span>
                                            </div>
                                            <div class="info-row">
                                                <span class="info-label">价格:</span>
                                                <span class="info-value price-tag">¥${meal.price || 'N/A'}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-actions">
                                        <button class="card-btn meal" onclick="orderMeal(${meal.mealId})">立即订购</button>
                                    </div>
                                </div>
                            `;
                        });
                        
                        html += '</div>';
                        container.innerHTML = html;
                    } else {
                        container.innerHTML = '<p style="text-align: center; color: #666; padding: 50px;">暂无餐食信息</p>';
                    }
                })
                .catch(error => {
                    console.error('加载餐食信息失败:', error);
                    container.innerHTML = '<p style="text-align: center; color: #ef4444; padding: 50px;">加载失败，请稍后重试</p>';
                });
        }
        
        // 加载火车票订单
        function loadTrainOrders() {
            const container = document.getElementById('train-orders-list');
            container.innerHTML = '<div class="loading">正在加载火车票订单...</div>';
            
            window.HeroRequest.request({
                url: '/boot/trainorder/userOrders',
                method: 'GET'
            })
                .then(response => {
                    console.log('火车票订单响应数据:', response);
                    const data = response.data || response;
                    console.log('解析后的火车票订单数据:', data);
                    if (data && data.length > 0) {
                        let html = '<table class="data-table"><thead><tr><th>订单号</th><th>车次</th><th>座位号</th><th>乘客姓名</th><th>出行日期</th><th>订单状态</th><th>金额</th><th>创建时间</th><th>操作</th></tr></thead><tbody>';
                        
                        data.forEach(order => {
                            const createTime = order.createTime ? new Date(order.createTime).toLocaleString() : 'N/A';
                            
                            // 根据订单状态生成操作按钮
                            let actionButtons = generateOrderActionButtons(order.orderStatus, 'train', order.trainOrderId);
                            
                            html += `
                                <tr>
                                    <td>${order.trainOrderId || 'N/A'}</td>
                                    <td>${order.trainNumber || 'N/A'}</td>
                                    <td>${order.seatNumber || 'N/A'}</td>
                                    <td>${order.passengerName || 'N/A'}</td>
                                    <td>${order.travelDate || 'N/A'}</td>
                                    <td>${getOrderStatusText(order.orderStatus)}</td>
                                    <td>¥${order.orderAmount || 'N/A'}</td>
                                    <td>${createTime}</td>
                                    <td>${actionButtons}</td>
                                </tr>
                            `;
                        });
                        
                        html += '</tbody></table>';
                        container.innerHTML = html;
                    } else {
                        container.innerHTML = '<p style="text-align: center; color: #666; padding: 50px;">暂无火车票订单记录</p>';
                    }
                })
                .catch(error => {
                    console.error('加载火车票订单失败:', error);
                    container.innerHTML = '<p style="text-align: center; color: #ef4444; padding: 50px;">加载失败，请稍后重试</p>';
                });
        }
        
        // 加载餐食订单
        function loadMealOrders() {
            const container = document.getElementById('meal-orders-list');
            container.innerHTML = '<div class="loading">正在加载餐食订单...</div>';
            
            window.HeroRequest.request({
                url: '/boot/mealorder/userOrders',
                method: 'GET'
            })
                .then(response => {
                    console.log('餐食订单响应数据:', response);
                    const data = response.data || response;
                    console.log('解析后的餐食订单数据:', data);
                    if (data && data.length > 0) {
                        let html = '<table class="data-table"><thead><tr><th>订单号</th><th>餐食名称</th><th>数量</th><th>关联车票</th><th>订单状态</th><th>金额</th><th>创建时间</th><th>操作</th></tr></thead><tbody>';
                        
                        data.forEach(order => {
                            const createTime = order.createTime ? new Date(order.createTime).toLocaleString() : 'N/A';
                            
                            // 根据订单状态生成操作按钮
                            let actionButtons = generateOrderActionButtons(order.orderStatus, 'meal', order.mealOrderId);
                            
                            html += `
                                <tr>
                                    <td>${order.mealOrderId || 'N/A'}</td>
                                    <td>${order.mealIdName || 'N/A'}</td>
                                    <td>${order.quantity || 1}</td>
                                    <td>${order.trainOrderIdName || 'N/A'}</td>
                                    <td>${getOrderStatusText(order.orderStatus)}</td>
                                    <td>¥${order.orderAmount || 'N/A'}</td>
                                    <td>${createTime}</td>
                                    <td>${actionButtons}</td>
                                </tr>
                            `;
                        });
                        
                        html += '</tbody></table>';
                        container.innerHTML = html;
                    } else {
                        container.innerHTML = '<p style="text-align: center; color: #666; padding: 50px;">暂无餐食订单记录</p>';
                    }
                })
                .catch(error => {
                    console.error('加载餐食订单失败:', error);
                    container.innerHTML = '<p style="text-align: center; color: #ef4444; padding: 50px;">加载失败，请稍后重试</p>';
                });
        }
        
        // 加载酒店订单
        function loadHotelOrders() {
            const container = document.getElementById('hotel-orders-list');
            container.innerHTML = '<div class="loading">正在加载酒店订单...</div>';
            
            window.HeroRequest.request({
                url: '/boot/hotelorder/userOrders',
                method: 'GET'
            })
                .then(response => {
                    console.log('酒店订单响应数据:', response);
                    const data = response.data || response;
                    console.log('解析后的酒店订单数据:', data);
                    if (data && data.length > 0) {
                        let html = '<table class="data-table"><thead><tr><th>订单号</th><th>酒店名称</th><th>入住人</th><th>入住日期</th><th>退房日期</th><th>订单状态</th><th>金额</th><th>创建时间</th><th>操作</th></tr></thead><tbody>';
                        
                        data.forEach(order => {
                            const createTime = order.createTime ? new Date(order.createTime).toLocaleString() : 'N/A';
                            const checkInDate = order.checkInDate ? new Date(order.checkInDate).toLocaleDateString() : 'N/A';
                            const checkOutDate = order.checkOutDate ? new Date(order.checkOutDate).toLocaleDateString() : 'N/A';
                            
                            // 根据订单状态生成操作按钮
                            let actionButtons = generateOrderActionButtons(order.orderStatus, 'hotel', order.hotelOrderId);
                            
                            html += `
                                <tr>
                                    <td>${order.hotelOrderId || 'N/A'}</td>
                                    <td>${order.hotelIdName || 'N/A'}</td>
                                    <td>${order.guestName || 'N/A'}</td>
                                    <td>${checkInDate}</td>
                                    <td>${checkOutDate}</td>
                                    <td>${getOrderStatusText(order.orderStatus)}</td>
                                    <td>¥${order.orderAmount || 'N/A'}</td>
                                    <td>${createTime}</td>
                                    <td>${actionButtons}</td>
                                </tr>
                            `;
                        });
                        
                        html += '</tbody></table>';
                        container.innerHTML = html;
                    } else {
                        container.innerHTML = '<p style="text-align: center; color: #666; padding: 50px;">暂无酒店订单记录</p>';
                    }
                })
                .catch(error => {
                    console.error('加载酒店订单失败:', error);
                    container.innerHTML = '<p style="text-align: center; color: #ef4444; padding: 50px;">加载失败，请稍后重试</p>';
                });
        }
        
        // 生成订单操作按钮的通用函数
        function generateOrderActionButtons(orderStatus, orderType, orderId) {
            let actionButtons = '';
            const capitalizedType = orderType.charAt(0).toUpperCase() + orderType.slice(1);
            
            if (orderStatus === '0') {
                // 待确认状态：显示确认支付和取消按钮
                actionButtons = `
                    <button class="btn btn-warning" onclick="confirmPayment('${orderType}', ${orderId})" style="margin-right: 5px;">确认支付</button>
                    <button class="btn btn-danger" onclick="cancel${capitalizedType}Order(${orderId})">取消订单</button>
                `;
            } else if (orderStatus === '1') {
                // 待支付状态：显示完成支付和取消按钮
                actionButtons = `
                    <button class="btn btn-primary" onclick="payOrder('${orderType}', ${orderId})" style="margin-right: 5px;">完成支付</button>
                    <button class="btn btn-danger" onclick="cancel${capitalizedType}Order(${orderId})">取消订单</button>
                `;
            } else if (orderStatus === '2') {
                // 已支付状态：不显示操作按钮或显示查看详情
                actionButtons = '<span style="color: #10b981;">已完成</span>';
            } else if (orderStatus === '3') {
                // 已取消状态：不显示操作按钮
                actionButtons = '<span style="color: #ef4444;">已取消</span>';
            }
            return actionButtons;
        }
        
        // 保留原始函数以兼容旧代码
        function loadOrders() {
            // 加载当前活跃的tab对应的订单
            const activeTab = document.querySelector('.tab-content.active');
            if (activeTab) {
                const tabId = activeTab.id;
                switch(tabId) {
                    case 'train-orders':
                        loadTrainOrders();
                        break;
                    case 'meal-orders':
                        loadMealOrders();
                        break;
                    case 'hotel-orders':
                        loadHotelOrders();
                        break;
                    default:
                        loadTrainOrders();
                        break;
                }
            } else {
                loadTrainOrders();
            }
        }
        
        // 当前选择的火车和座位信息
        let currentTrainId = null;
        let currentTrainData = null; // 存储完整的火车信息
        let currentSelectedSeat = null;
        let occupiedSeats = new Set(); // 存储已售座位
        
        // 预订火车票 - 打开选座界面
        function bookTrain(trainId) {
            if (!HeroAuth.isLoggedIn()) {
                HeroCommon.showNotification('请先登录', 'warning');
                HeroLoginModal.showLogin();
                return;
            }
            
            currentTrainId = trainId;
            // 并行获取火车信息和已售座位
            Promise.all([
                TrainAPI.getTrain(trainId),
                TrainorderAPI.getTrainSeats(trainId)
            ])
                .then(([trainResponse, seatsResponse]) => {
                    const train = trainResponse.data || trainResponse;
                    const seatData = seatsResponse.data || seatsResponse || [];
                    
                    // 保存火车信息
                    currentTrainData = train;
                    
                    console.log('原始座位数据:', seatData);
                    console.log('座位数据类型:', typeof seatData, Array.isArray(seatData));
                    
                    // 处理已售座位数据
                    occupiedSeats.clear();
                    if (Array.isArray(seatData)) {
                        seatData.forEach(seatNumber => {
                            if (seatNumber) {
                                console.log('处理座位号:', seatNumber);
                                // 标准化座位号格式，返回可能的座位格式数组
                                let normalizedSeats = normalizeSeatNumber(seatNumber);
                                console.log('标准化后的座位:', normalizedSeats);
                                normalizedSeats.forEach(seat => {
                                    occupiedSeats.add(seat);
                                });
                            }
                        });
                    }
                    
                    console.log('已售座位数据 (Set):', occupiedSeats);
                    console.log('已售座位数据 (Array):', Array.from(occupiedSeats));
                    
                    showSeatModal(train);
                })
                .catch(error => {
                    console.error('获取数据失败:', error);
                    // 即使获取座位数据失败，也显示选座界面（使用空的已售座位列表）
                    occupiedSeats.clear();
                    TrainAPI.getTrain(trainId)
                        .then(train => {
                            showSeatModal(train.data || train);
                        })
                        .catch(err => {
                            HeroCommon.showNotification('获取火车信息失败', 'error');
                        });
                });
        }
        
        // 显示选座模态框
        function showSeatModal(train) {
            const modal = document.getElementById('seat-modal');
            const trainInfo = document.getElementById('train-info');
            
            trainInfo.innerHTML = `${train.trainNumber} ${train.trainName} | ${train.departureStation} → ${train.arrivalStation}`;
            
            // 生成车厢按钮 (简化为1-8车厢)
            generateCarriageButtons();
            
            // 默认选择1车厢
            selectCarriage(1);
            
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden';
        }
        
        // 生成车厢按钮
        function generateCarriageButtons() {
            const container = document.getElementById('carriage-buttons');
            container.innerHTML = '';
            
            for (let i = 1; i <= 8; i++) {
                const btn = document.createElement('button');
                btn.className = 'carriage-btn';
                btn.textContent = `${i}车`;
                btn.onclick = () => selectCarriage(i);
                container.appendChild(btn);
            }
        }
        
        // 选择车厢
        function selectCarriage(carriageNum) {
            // 更新车厢按钮状态
            document.querySelectorAll('.carriage-btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.textContent === `${carriageNum}车`) {
                    btn.classList.add('active');
                }
            });
            
            // 生成座位地图
            generateSeatMap(carriageNum);
        }
        
        // 生成座位地图
        function generateSeatMap(carriageNum) {
            const seatMap = document.getElementById('seat-map');
            seatMap.innerHTML = '';
            
            // 简化座位布局：每车厢20排，每排5个座位 (A,B,C,D,F)
            const seats = ['A', 'B', 'C', 'D', 'F'];
            
            for (let row = 1; row <= 20; row++) {
                for (let seatLetter of seats) {
                    const seatNumber = `${String(row).padStart(2, '0')}${seatLetter}`;
                    const seat = document.createElement('div');
                    seat.className = 'seat available';
                    seat.textContent = seatNumber;
                    seat.dataset.carriage = carriageNum;
                    seat.dataset.seat = seatNumber;
                    
                    // 检查是否为已售座位
                    const fullSeatNumber = `${carriageNum}车${seatNumber}`;
                    const isOccupied = occupiedSeats.has(fullSeatNumber);
                    console.log(`检查座位 ${fullSeatNumber}: ${isOccupied ? '已售' : '可选'}`);
                    
                    if (isOccupied) {
                        seat.className = 'seat occupied';
                    } else {
                        seat.onclick = () => selectSeat(carriageNum, seatNumber, seat);
                    }
                    
                    seatMap.appendChild(seat);
                }
            }
        }
        
        // 选择座位
        function selectSeat(carriageNum, seatNumber, seatElement) {
            // 清除之前的选择
            document.querySelectorAll('.seat.selected').forEach(s => {
                s.classList.remove('selected');
                s.classList.add('available');
            });
            
            // 选中当前座位
            seatElement.classList.remove('available');
            seatElement.classList.add('selected');
            
            currentSelectedSeat = {
                carriage: carriageNum,
                seat: seatNumber,
                type: currentSeatClass.name,
                price: currentSeatClass.price
            };
            
            // 更新选中座位信息显示
            document.getElementById('selected-seat-info').innerHTML = 
                `已选择: ${carriageNum}车厢 ${seatNumber} (${currentSeatClass.name}) - ¥${currentSeatClass.price}`;
            
            // 启用确认按钮
            document.getElementById('confirm-seat-btn').disabled = false;
        }
        
        // 关闭选座模态框
        function closeSeatModal() {
            document.getElementById('seat-modal').style.display = 'none';
            document.body.style.overflow = '';
            currentTrainId = null;
            currentSelectedSeat = null;
        }
        
        // 确认选座并显示购买确认弹窗
        function confirmSeatSelection() {
            if (!currentSelectedSeat || !currentTrainId || !currentTrainData) {
                HeroCommon.showNotification('请先选择座位', 'warning');
                return;
            }
            
            // 显示购买确认弹窗
            showBookingConfirmModal();
        }
        
        // 显示购票确认弹窗
        function showBookingConfirmModal() {
            // 填充火车信息
            const trainInfo = `
                <div class="info-item">
                    <span class="info-label">车次:</span>
                    <span class="info-value">${currentTrainData.trainNumber}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">列车名称:</span>
                    <span class="info-value">${currentTrainData.trainName}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">出发站:</span>
                    <span class="info-value">${currentTrainData.departureStation}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">到达站:</span>
                    <span class="info-value">${currentTrainData.arrivalStation}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">出发时间:</span>
                    <span class="info-value">${currentTrainData.departureTime || '待确认'}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">到达时间:</span>
                    <span class="info-value">${currentTrainData.arrivalTime || '待确认'}</span>
                </div>
            `;
            document.getElementById('train-info-display').innerHTML = trainInfo;
            
            // 填充座位信息
            const seatInfo = `
                <div class="info-item">
                    <span class="info-label">车厢:</span>
                    <span class="info-value">${currentSelectedSeat.carriage}车厢</span>
                </div>
                <div class="info-item">
                    <span class="info-label">座位号:</span>
                    <span class="info-value">${currentSelectedSeat.seat}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">座位类型:</span>
                    <span class="info-value">${currentSelectedSeat.type}</span>
                </div>
            `;
            document.getElementById('seat-info-display').innerHTML = seatInfo;
            
            // 填充订单摘要
            const price = currentSelectedSeat.price || currentSeatClass.price;
            const orderSummary = `
                <div class="info-item">
                    <span class="info-label">票价:</span>
                    <span class="info-value price-highlight">¥${price}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">座位类型:</span>
                    <span class="info-value">${currentSeatClass.name}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">数量:</span>
                    <span class="info-value">1张</span>
                </div>
                <div class="info-item">
                    <span class="info-label">总金额:</span>
                    <span class="info-value price-highlight">¥${price}</span>
                </div>
            `;
            document.getElementById('order-summary-display').innerHTML = orderSummary;
            
            // 预填用户信息
            HeroAuth.getInfo().then(userInfo => {
                document.getElementById('passenger-name').value = userInfo.user.nickName || '';
                document.getElementById('passenger-phone').value = userInfo.user.phonenumber || '';
            }).catch(() => {
                // 忽略错误，用户可以手动输入
            });
            
            // 显示弹窗
            document.getElementById('booking-confirm-modal').style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭购票确认弹窗
        function closeBookingConfirmModal() {
            document.getElementById('booking-confirm-modal').style.display = 'none';
            document.body.style.overflow = '';
        }
        
        // 提交火车票订单
        function submitTrainOrder() {
            // 验证乘客信息
            const passengerName = document.getElementById('passenger-name').value.trim();
            const passengerPhone = document.getElementById('passenger-phone').value.trim();
            
            if (!passengerName) {
                HeroCommon.showNotification('请输入乘客姓名', 'warning');
                document.getElementById('passenger-name').focus();
                return;
            }
            
            if (!passengerPhone) {
                HeroCommon.showNotification('请输入联系电话', 'warning');
                document.getElementById('passenger-phone').focus();
                return;
            }
            
            // 验证手机号格式
            if (!/^1[3-9]\d{9}$/.test(passengerPhone)) {
                HeroCommon.showNotification('请输入正确的手机号码', 'warning');
                document.getElementById('passenger-phone').focus();
                return;
            }
            
            HeroAuth.getInfo()
                .then(userInfo => {
                    const orderData = {
                        trainId: currentTrainId,
                        userId: userInfo.user.userId,
                        passengerName: passengerName,
                        passengerPhone: passengerPhone,
                        seatNumber: `${currentSelectedSeat.carriage}车${currentSelectedSeat.seat}`,
                        seatClass: currentSeatClass.name,
                        orderAmount: currentSelectedSeat.price || currentSeatClass.price,
                        orderStatus: '0' // 待确认
                    };
                    
                    return TrainorderAPI.addTrainorder(orderData);
                })
                .then(data => {
                    HeroCommon.showNotification('火车票预订成功！', 'success');
                    closeBookingConfirmModal();
                    closeSeatModal();
                    // 如果在订单页面，刷新订单列表
                    if (!document.getElementById('orders-content').classList.contains('hidden')) {
                        loadOrders();
                    }
                    // 如果在火车票页面，刷新火车列表显示最新余票
                    if (!document.getElementById('trains-content').classList.contains('hidden')) {
                        loadTrains();
                    }
                })
                .catch(error => {
                    console.error('火车票预订失败:', error);
                    HeroCommon.showNotification('预订失败：' + error.message, 'error');
                });
        }
        
        // 当前选择的酒店信息
        let currentHotelId = null;
        let currentHotelData = null;
        
        // 预订酒店 - 打开预订确认界面
        function bookHotel(hotelId, availableRooms = null) {
            if (!HeroAuth.isLoggedIn()) {
                HeroCommon.showNotification('请先登录', 'warning');
                HeroLoginModal.showLogin();
                return;
            }
            
            // 检查库存
            if (availableRooms !== null && availableRooms <= 0) {
                HeroCommon.showNotification('该酒店已满房，无法预订', 'warning');
                return;
            }
            
            currentHotelId = hotelId;
            
            // 获取酒店信息
            HotelAPI.getHotel(hotelId)
                .then(hotelResponse => {
                    const hotel = hotelResponse.data || hotelResponse;
                    currentHotelData = hotel;
                    
                    // 再次检查实时库存
                    if (hotel.availableRooms <= 0) {
                        HeroCommon.showNotification('该酒店已满房，无法预订', 'warning');
                        // 更新界面显示
                        updateHotelAvailability(hotelId, 0);
                        return;
                    }
                    
                    showHotelBookingConfirmModal(hotel);
                })
                .catch(error => {
                    console.error('获取酒店信息失败:', error);
                    HeroCommon.showNotification('获取酒店信息失败', 'error');
                });
        }

        // 更新酒店可用性显示
        function updateHotelAvailability(hotelId, availableRooms) {
            const roomsElement = document.getElementById(`hotel-rooms-${hotelId}`);
            const bookButton = document.getElementById(`book-btn-${hotelId}`);
            
            if (roomsElement) {
                roomsElement.textContent = `${availableRooms}间`;
                roomsElement.className = availableRooms === 0 ? 'info-value text-danger' : 'info-value';
            }
            
            if (bookButton) {
                if (availableRooms <= 0) {
                    bookButton.disabled = true;
                    bookButton.textContent = '已满房';
                    bookButton.closest('.item-card').classList.add('unavailable');
                } else {
                    bookButton.disabled = false;
                    bookButton.textContent = '立即预订';
                    bookButton.closest('.item-card').classList.remove('unavailable');
                }
            }
        }
        
        // 显示酒店预订确认弹窗
        function showHotelBookingConfirmModal(hotel) {
            // 填充酒店信息
            const hotelInfo = `
                <div class="info-item">
                    <span class="info-label">酒店名称:</span>
                    <span class="info-value">${hotel.hotelName || 'N/A'}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">酒店地址:</span>
                    <span class="info-value">${hotel.hotelAddress || 'N/A'}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">联系电话:</span>
                    <span class="info-value">${hotel.hotelPhone || 'N/A'}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">房型:</span>
                    <span class="info-value">${hotel.roomType || 'N/A'}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">可用房间:</span>
                    <span class="info-value">${hotel.availableRooms || 'N/A'}间</span>
                </div>
            `;
            document.getElementById('hotel-info-display').innerHTML = hotelInfo;
            
            // 设置默认日期（今天入住，明天退房）
            const today = new Date();
            const tomorrow = new Date(today);
            tomorrow.setDate(today.getDate() + 1);
            
            const checkInInput = document.getElementById('check-in-date');
            const checkOutInput = document.getElementById('check-out-date');
            
            checkInInput.value = today.toISOString().split('T')[0];
            checkInInput.min = today.toISOString().split('T')[0]; // 不能选择过去的日期
            
            checkOutInput.value = tomorrow.toISOString().split('T')[0];
            checkOutInput.min = tomorrow.toISOString().split('T')[0];
            
            // 更新天数计算
            updateNightsCount();
            
            // 预填用户信息
            HeroAuth.getInfo().then(userInfo => {
                document.getElementById('guest-name').value = userInfo.user.nickName || '';
                document.getElementById('guest-phone').value = userInfo.user.phonenumber || '';
            }).catch(() => {
                // 忽略错误，用户可以手动输入
            });
            
            // 显示弹窗
            document.getElementById('hotel-booking-confirm-modal').style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭酒店预订确认弹窗
        function closeHotelBookingConfirmModal() {
            document.getElementById('hotel-booking-confirm-modal').style.display = 'none';
            document.body.style.overflow = '';
            currentHotelId = null;
            currentHotelData = null;
        }
        
        // 更新入住天数显示
        function updateNightsCount() {
            const checkInDate = document.getElementById('check-in-date').value;
            const checkOutDate = document.getElementById('check-out-date').value;
            
            if (checkInDate && checkOutDate) {
                const checkIn = new Date(checkInDate);
                const checkOut = new Date(checkOutDate);
                const timeDiff = checkOut.getTime() - checkIn.getTime();
                const dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
                
                if (dayDiff > 0) {
                    document.getElementById('nights-count').textContent = `${dayDiff} 晚`;
                    updateHotelOrderSummary(dayDiff);
                } else {
                    document.getElementById('nights-count').textContent = '请选择正确的日期';
                }
            }
        }
        
        // 更新酒店订单摘要
        function updateHotelOrderSummary(nights) {
            if (!currentHotelData) return;
            
            const pricePerNight = currentHotelData.price || 0;
            const totalAmount = pricePerNight * nights;
            
            const orderSummary = `
                <div class="info-item">
                    <span class="info-label">房价:</span>
                    <span class="info-value">¥${pricePerNight}/晚</span>
                </div>
                <div class="info-item">
                    <span class="info-label">入住天数:</span>
                    <span class="info-value">${nights} 晚</span>
                </div>
                <div class="info-item">
                    <span class="info-label">总金额:</span>
                    <span class="info-value price-highlight">¥${totalAmount}</span>
                </div>
            `;
            document.getElementById('hotel-order-summary-display').innerHTML = orderSummary;
        }
        
        // 提交酒店订单
        function submitHotelOrder() {
            // 验证入住信息
            const checkInDate = document.getElementById('check-in-date').value;
            const checkOutDate = document.getElementById('check-out-date').value;
            const guestName = document.getElementById('guest-name').value.trim();
            const guestPhone = document.getElementById('guest-phone').value.trim();
            
            if (!checkInDate) {
                HeroCommon.showNotification('请选择入住日期', 'warning');
                document.getElementById('check-in-date').focus();
                return;
            }
            
            if (!checkOutDate) {
                HeroCommon.showNotification('请选择退房日期', 'warning');
                document.getElementById('check-out-date').focus();
                return;
            }
            
            const checkIn = new Date(checkInDate);
            const checkOut = new Date(checkOutDate);
            if (checkOut <= checkIn) {
                HeroCommon.showNotification('退房日期必须晚于入住日期', 'warning');
                document.getElementById('check-out-date').focus();
                return;
            }
            
            if (!guestName) {
                HeroCommon.showNotification('请输入入住人姓名', 'warning');
                document.getElementById('guest-name').focus();
                return;
            }
            
            if (!guestPhone) {
                HeroCommon.showNotification('请输入联系电话', 'warning');
                document.getElementById('guest-phone').focus();
                return;
            }
            
            // 验证手机号格式
            if (!/^1[3-9]\d{9}$/.test(guestPhone)) {
                HeroCommon.showNotification('请输入正确的手机号码', 'warning');
                document.getElementById('guest-phone').focus();
                return;
            }
            
            // 计算总金额
            const nights = Math.ceil((checkOut.getTime() - checkIn.getTime()) / (1000 * 3600 * 24));
            const totalAmount = (currentHotelData.price || 0) * nights;
            
            HeroAuth.getInfo()
                .then(userInfo => {
                    const orderData = {
                        hotelId: currentHotelId,
                        userId: userInfo.user.userId,
                        checkInDate: checkInDate + 'T15:00:00.000Z', // 下午3点入住
                        checkOutDate: checkOutDate + 'T12:00:00.000Z', // 中午12点退房
                        guestName: guestName,
                        guestPhone: guestPhone,
                        orderAmount: totalAmount,
                        orderStatus: '0' // 0=待确认, 1=待支付, 2=已支付, 3=已取消
                    };
                    
                    return HotelorderAPI.createHotelorder(orderData);
                })
                .then(data => {
                    HeroCommon.showNotification('酒店预订成功！', 'success');
                    closeHotelBookingConfirmModal();
                    
                    // 更新酒店库存显示
                    if (currentHotelData && currentHotelData.availableRooms > 0) {
                        const newAvailableRooms = currentHotelData.availableRooms - 1;
                        updateHotelAvailability(currentHotelId, newAvailableRooms);
                        // 更新当前数据
                        currentHotelData.availableRooms = newAvailableRooms;
                    }
                    
                    // 如果当前在订单页面，刷新订单列表
                    if (!document.getElementById('orders-content').classList.contains('hidden')) {
                        loadOrders();
                    }
                    
                    // 如果当前在酒店页面，可能需要刷新列表以获取最新库存
                    if (!document.getElementById('hotels-content').classList.contains('hidden')) {
                        const province = document.getElementById('hotel-province').value;
                        const city = document.getElementById('hotel-city').value;
                        const checkinDate = document.getElementById('hotel-checkin-date').value;
                        const checkoutDate = document.getElementById('hotel-checkout-date').value;
                        
                        // 如果有搜索条件，重新加载以获取最新数据
                        if (province && city && checkinDate && checkoutDate) {
                            setTimeout(() => {
                                loadHotels(province, city, checkinDate, checkoutDate);
                            }, 1000); // 延迟1秒以确保后端数据更新
                        }
                    }
                })
                .catch(error => {
                    console.error('酒店预订失败:', error);
                    HeroCommon.showNotification('预订失败：' + error.message, 'error');
                });
        }
        
        // 当前选择的餐食信息
        let currentMealId = null;
        let currentMealData = null;
        
        // 加载用户的火车票
        function loadUserTrainTickets() {
            if (!HeroAuth.isLoggedIn()) {
                return;
            }
            
            // 获取用户已购买的火车票
            TrainorderAPI.listTrainorder({ pageNum: 1, pageSize: 50, orderStatus: '2' }) // 只获取已支付的车票
                .then(data => {
                    const selectElement = document.getElementById('selected-train-ticket');
                    // 清空现有选项（保留默认选项）
                    selectElement.innerHTML = '<option value="">请选择您已购买的车票</option>';
                    
                    if (data && data.rows && data.rows.length > 0) {
                        data.rows.forEach(order => {
                            const option = document.createElement('option');
                            option.value = order.trainOrderId;
                            option.textContent = `车次: ${order.trainNumber}`;
                            selectElement.appendChild(option);
                        });
                    } else {
                        const option = document.createElement('option');
                        option.value = '';
                        option.textContent = '暂无已购车票，请先购买火车票';
                        option.disabled = true;
                        selectElement.appendChild(option);
                    }
                })
                .catch(error => {
                    console.error('加载用户车票失败:', error);
                    const selectElement = document.getElementById('selected-train-ticket');
                    selectElement.innerHTML = '<option value="">加载车票信息失败</option>';
                });
        }
        
        // 订购餐食 - 打开订购确认界面
        function orderMeal(mealId) {
            if (!HeroAuth.isLoggedIn()) {
                HeroCommon.showNotification('请先登录', 'warning');
                HeroLoginModal.showLogin();
                return;
            }
            
            currentMealId = mealId;
            
            // 获取餐食信息
            MealAPI.getMeal(mealId)
                .then(mealResponse => {
                    const meal = mealResponse.data || mealResponse;
                    currentMealData = meal;
                    showMealBookingConfirmModal(meal);
                })
                .catch(error => {
                    console.error('获取餐食信息失败:', error);
                    HeroCommon.showNotification('获取餐食信息失败', 'error');
                });
        }
        
        // 显示餐食订购确认弹窗
        function showMealBookingConfirmModal(meal) {
            // 填充餐食信息
            const mealInfo = `
                <div class="info-item">
                    <span class="info-label">餐食名称:</span>
                    <span class="info-value">${meal.mealName || 'N/A'}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">餐食类型:</span>
                    <span class="info-value">${meal.mealType || 'N/A'}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">餐食描述:</span>
                    <span class="info-value">${meal.mealDescription || meal.description || 'N/A'}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">单价:</span>
                    <span class="info-value price-highlight">¥${meal.price || 'N/A'}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">可售数量:</span>
                    <span class="info-value">${meal.availableQuantity || 'N/A'}份</span>
                </div>
            `;
            document.getElementById('meal-info-display').innerHTML = mealInfo;
            
            // 重置数量为1
            document.getElementById('meal-quantity').value = 1;
            
            // 清空选择的车票
            document.getElementById('selected-train-ticket').value = '';
            // 加载用户的车票
            loadUserTrainTickets();
            
            // 更新订单摘要
            updateMealOrderSummary();
            
            // 显示弹窗
            document.getElementById('meal-booking-confirm-modal').style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭餐食订购确认弹窗
        function closeMealBookingConfirmModal() {
            document.getElementById('meal-booking-confirm-modal').style.display = 'none';
            document.body.style.overflow = '';
            currentMealId = null;
            currentMealData = null;
        }
        
        // 修改餐食数量
        function changeMealQuantity(change) {
            const quantityInput = document.getElementById('meal-quantity');
            const currentQuantity = parseInt(quantityInput.value) || 1;
            const newQuantity = Math.max(1, Math.min(10, currentQuantity + change));
            
            // 检查是否超过可售数量
            if (currentMealData && currentMealData.availableQuantity) {
                const maxQuantity = Math.min(10, parseInt(currentMealData.availableQuantity));
                if (newQuantity > maxQuantity) {
                    HeroCommon.showNotification(`最多只能购买${maxQuantity}份`, 'warning');
                    return;
                }
            }
            
            quantityInput.value = newQuantity;
            updateMealOrderSummary();
        }
        
        // 更新餐食订单摘要
        function updateMealOrderSummary() {
            if (!currentMealData) return;
            
            const quantity = parseInt(document.getElementById('meal-quantity').value) || 1;
            const pricePerItem = currentMealData.price || 0;
            const totalAmount = pricePerItem * quantity;
            
            const orderSummary = `
                <div class="info-item">
                    <span class="info-label">单价:</span>
                    <span class="info-value">¥${pricePerItem}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">数量:</span>
                    <span class="info-value">${quantity}份</span>
                </div>
                <div class="info-item">
                    <span class="info-label">总金额:</span>
                    <span class="info-value price-highlight">¥${totalAmount}</span>
                </div>
            `;
            document.getElementById('meal-order-summary-display').innerHTML = orderSummary;
        }
        
        // 提交餐食订单
        function submitMealOrder() {
            // 验证订购信息
            const quantity = parseInt(document.getElementById('meal-quantity').value) || 1;
            const selectedTicket = document.getElementById('selected-train-ticket').value;
            
            if (quantity < 1 || quantity > 10) {
                HeroCommon.showNotification('购买数量必须在1-10之间', 'warning');
                document.getElementById('meal-quantity').focus();
                return;
            }
            
            if (!selectedTicket) {
                HeroCommon.showNotification('请选择您已购买的车票', 'warning');
                document.getElementById('selected-train-ticket').focus();
                return;
            }
            
            // 解析选择的车票信息
            const trainOrderId = parseInt(selectedTicket);
            
            // 检查是否超过可售数量
            if (currentMealData.availableQuantity && quantity > currentMealData.availableQuantity) {
                HeroCommon.showNotification(`库存不足，最多只能购买${currentMealData.availableQuantity}份`, 'warning');
                return;
            }
            
            // 计算总金额
            const totalAmount = (currentMealData.price || 0) * quantity;
            
            HeroAuth.getInfo()
                .then(userInfo => {
                    const orderData = {
                        mealId: currentMealId,
                        userId: userInfo.user.userId,
                        quantity: quantity,
                        orderAmount: totalAmount,
                        trainOrderId: trainOrderId,
                        orderStatus: '0' // 0=待确认, 1=待支付, 2=已支付, 3=已取消
                    };
                    
                    return MealorderAPI.addMealorder(orderData);
                })
                .then(data => {
                    HeroCommon.showNotification('餐食订购成功！', 'success');
                    closeMealBookingConfirmModal();
                    // 如果当前在订单页面，刷新订单列表
                    if (!document.getElementById('orders-content').classList.contains('hidden')) {
                        loadOrders();
                    }
                    // 如果当前在餐食页面，刷新餐食列表以显示最新库存
                    if (!document.getElementById('meals-content').classList.contains('hidden')) {
                        loadMeals();
                    }
                })
                .catch(error => {
                    console.error('餐食订购失败:', error);
                    HeroCommon.showNotification('订购失败：' + error.message, 'error');
                });
        }
        
        // 确认支付（状态0→1）
        function confirmPayment(orderType, orderId) {
            if (confirm('确认要进入支付流程吗？')) {
                let updatePromise;
                let orderAPI;
                
                // 根据订单类型选择相应的API
                if (orderType === 'train') {
                    orderAPI = TrainorderAPI;
                } else if (orderType === 'hotel') {
                    orderAPI = HotelorderAPI;
                } else if (orderType === 'meal') {
                    orderAPI = MealorderAPI;
                }
                
                // 获取订单详情，然后更新状态
                if (orderType === 'train') {
                    updatePromise = TrainorderAPI.getTrainorder(orderId);
                } else if (orderType === 'hotel') {
                    updatePromise = HotelorderAPI.getHotelorder(orderId);
                } else if (orderType === 'meal') {
                    updatePromise = MealorderAPI.getMealorder(orderId);
                }
                
                updatePromise
                    .then(response => {
                        const orderData = response.data || response;
                        orderData.orderStatus = '1'; // 设置为待支付
                        
                        // 更新订单状态
                        let editMethod;
                        if (orderType === 'train') {
                            editMethod = TrainorderAPI.updateTrainorder;
                        } else if (orderType === 'hotel') {
                            editMethod = HotelorderAPI.updateHotelorder;
                        } else if (orderType === 'meal') {
                            editMethod = MealorderAPI.updateMealorder;
                        }
                        
                        return editMethod(orderData);
                    })
                    .then(() => {
                        HeroCommon.showNotification('已确认支付，请完成付款', 'success');
                        loadOrders();
                    })
                    .catch(error => {
                        console.error('确认支付失败:', error);
                        HeroCommon.showNotification('确认支付失败：' + error.message, 'error');
                    });
            }
        }
        
        // 完成支付（状态1→2）
        function payOrder(orderType, orderId) {
            if (confirm('确认支付此订单吗？')) {
                let updatePromise;
                let orderAPI;
                
                // 根据订单类型选择相应的API
                if (orderType === 'train') {
                    orderAPI = TrainorderAPI;
                } else if (orderType === 'hotel') {
                    orderAPI = HotelorderAPI;
                } else if (orderType === 'meal') {
                    orderAPI = MealorderAPI;
                }
                
                // 获取订单详情，然后更新状态
                if (orderType === 'train') {
                    updatePromise = TrainorderAPI.getTrainorder(orderId);
                } else if (orderType === 'hotel') {
                    updatePromise = HotelorderAPI.getHotelorder(orderId);
                } else if (orderType === 'meal') {
                    updatePromise = MealorderAPI.getMealorder(orderId);
                }
                
                updatePromise
                    .then(response => {
                        const orderData = response.data || response;
                        orderData.orderStatus = '2'; // 设置为已支付
                        
                        // 更新订单状态
                        let editMethod;
                        if (orderType === 'train') {
                            editMethod = TrainorderAPI.updateTrainorder;
                        } else if (orderType === 'hotel') {
                            editMethod = HotelorderAPI.updateHotelorder;
                        } else if (orderType === 'meal') {
                            editMethod = MealorderAPI.updateMealorder;
                        }
                        
                        return editMethod(orderData);
                    })
                    .then(() => {
                        HeroCommon.showNotification(`${orderType === 'train' ? '火车票' : orderType === 'hotel' ? '酒店' : '餐食'}订单支付成功！`, 'success');
                        loadOrders();
                    })
                    .catch(error => {
                        console.error('支付失败:', error);
                        HeroCommon.showNotification('支付失败：' + error.message, 'error');
                    });
            }
        }
        
        // 取消订单
        // 取消火车票订单
        function cancelTrainOrder(orderId) {
            if (confirm('确定要取消此火车票订单吗？')) {
                TrainorderAPI.delTrainorder(orderId)
                    .then(() => {
                        HeroCommon.showNotification('火车票订单已取消', 'success');
                        loadOrders();
                        // 如果在火车票页面，刷新火车列表显示最新余票
                        if (!document.getElementById('trains-content').classList.contains('hidden')) {
                            loadTrains();
                        }
                    })
                    .catch(error => {
                        console.error('取消订单失败:', error);
                        HeroCommon.showNotification('取消失败：' + error.message, 'error');
                    });
            }
        }
        
        // 取消酒店订单
        function cancelHotelOrder(orderId) {
            if (confirm('确定要取消此酒店预订吗？')) {
                HotelorderAPI.delHotelorder(orderId)
                    .then(data => {
                        HeroCommon.showNotification('酒店预订已取消', 'success');
                        loadOrders();
                    })
                    .catch(error => {
                        HeroCommon.showNotification('取消失败：' + error.message, 'error');
                    });
            }
        }
        
        // 取消餐食订单
        function cancelMealOrder(orderId) {
            if (confirm('确定要取消此餐食订单吗？')) {
                MealorderAPI.delMealorder(orderId)
                    .then(data => {
                        HeroCommon.showNotification('餐食订单已取消', 'success');
                        loadOrders();
                    })
                    .catch(error => {
                        HeroCommon.showNotification('取消失败：' + error.message, 'error');
                    });
            }
        }
        
        // 兼容旧的取消订单函数（仅处理火车票）
        function cancelOrder(orderId) {
            cancelTrainOrder(orderId);
        }
        
        // 检查并更新管理员链接显示状态
        function updateAdminLinkVisibility() {
            HeroAuth.getInfo()
                .then(data => {
                    const adminLink = document.getElementById('admin-link');
                    if (adminLink && data && data.roles && data.roles.includes('admin')) {
                        adminLink.style.display = 'block';
                    } else if (adminLink) {
                        adminLink.style.display = 'none';
                    }
                })
                .catch(error => {
                    // 获取用户信息失败时隐藏管理员链接
                    const adminLink = document.getElementById('admin-link');
                    if (adminLink) {
                        adminLink.style.display = 'none';
                    }
                });
        }
    </script>
</body>
</html>